<template>
<div>
		<view v-if="loading">
			<van-loading size="24px" color="#1989fa" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">加载中...</van-loading>
		</view>
		<view v-else>
			<div>
				<div v-if="zzc==false">
					<div :class="{ move: isMove,bm: true ,move2: isMove2}" @click="djzzc">
						<div class="lm">
							<div class="lm2">
								<div class="lm3"></div>
							</div>
			
							<div style="display: flex;">
								<div style="flex: 1; display: flex; align-items: center;">
									<img :src="qbsj[0].user.avatar" alt="image"
										style="width: 30px;height: 30px;border-radius: 100%;">
									<div style="font-size: 14px; font-weight: bold;margin-left: 10px;">{{qbsj[0].user.nickname}}
									</div>
								</div>
								<div style="flex: 1; display: flex; justify-content: flex-end;align-items: center;">
									<div style="margin-right: 10px;">
										<van-icon name="share-o" size="20px" />
									</div>
								</div>
							</div>
			
							<div
								style="font-size: 16px; color: #7a7a7a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;margin: 10px 0;">
								{{qbsj[0].content}}
							</div>
							<div style="font-size: 14px; color: #c4a068;margin-bottom: 30px;">
								全文
							</div>
			
							<div style="display: flex; border: 1px solid #f0f0f0;">
								<div
									style="width: 50px; height: 50px; border-right: 1px solid #f0f0f0; display: flex; justify-content: center; align-items: center;">
									<span style="color: #808080; font-size: 14px;">{{qbsj[0].riqi}}</span>
								</div>
								<div style="flex: 1; display:flex; flex-direction: column; justify-content:center;">
									<div style="font-size:15px;font-weight:bold;color:#808080;margin-left:20px;">
										{{qbsj[0].title}}
									</div>
									<div style="font-size:12px;color:#808080;margin-left:20px;">{{qbsj[0].provenance}}</div>
								</div>
							</div>
			
							<div style="display: flex;margin: 20px;">
								<div style="flex: 1;font-size: 12px;color: #b0b0b0;">
									{{qbsj[0].nq}}
								</div>
								<div style="flex: 1; display: flex; justify-content: flex-end;font-size: 12px;color: #b0b0b0;">
									<van-icon name="chat-o" style="margin-right: 10px;" />
									<van-icon name="like-o" style="margin-right: 10px;" :color="axzt" @click="djax" />
									<div>21</div>
								</div>
							</div>
						</div>
					</div>
			
			
					<div style="width: 100%;display: flex;position: fixed;bottom: 60px;">
						<div style="flex: 1; display: flex; justify-content: center; align-items: center;" @click="undo">
							<div style="background-color: white;border-radius: 100%;padding: 10px;">
								<van-icon name="revoke" size="20px" />
							</div>
						</div>
						<div style="flex: 1; display: flex; justify-content: center; align-items: center;" @click="moveToSc">
							<div style="background-color: white;border-radius: 100%;padding: 10px;">
								<van-icon name="cross" size="30px" />
							</div>
						</div>
						<div style="flex: 1; display:flex; justify-content:center; align-items:center;" @click="moveToXh">
							<div style="background-color: white;border-radius: 100%;padding: 10px;">
								<van-icon name="like-o" size="20px" color="red" />
							</div>
						</div>
					</div>
				</div>
			
				<van-overlay :show="zzc" style="margin-bottom: 100px;">
					<van-icon name="cross" size="25px" style="margin: 10px;" color="white" @click="zzc=false" />
					<div class="bm">
						<div class="lm">
							<div style="display: flex;">
								<div style="flex: 1; display: flex; align-items: center;">
									<img :src="qbsj[0].user.avatar" alt="image"
										style="width: 30px;height: 30px;border-radius: 100%;">
									<div style="font-size: 14px; font-weight: bold;margin-left: 10px;">{{qbsj[0].user.nickname}}
									</div>
								</div>
								<div style="flex: 1; display: flex; justify-content: flex-end;align-items: center;">
									<div style="margin-right: 10px;">
										<van-icon name="ellipsis" size="20px" @click="onSelect"/>
									</div>
								</div>
							</div>
			
							<div style="font-size: 16px; color: #7a7a7a;margin: 10px 0;">
								{{qbsj[0].content}}
							</div>
			
							<div style="display: flex; border: 1px solid #f0f0f0;">
								<div
									style="width: 50px; height: 50px; border-right: 1px solid #f0f0f0; display: flex; justify-content: center; align-items: center;">
									<span style="color: #808080; font-size: 14px;">{{qbsj[0].riqi}}</span>
								</div>
								<div style="flex: 1; display:flex; flex-direction: column; justify-content:center;">
									<div style="font-size:15px;font-weight:bold;color:#808080;margin-left:20px;">
										{{qbsj[0].title}}
									</div>
									<div style="font-size:12px;color:#808080;margin-left:20px;">{{qbsj[0].provenance}}</div>
								</div>
							</div>
			
							<div style="display: flex;margin: 20px;">
								<div style="flex: 1; display: flex;font-size: 12px;color: #b0b0b0;">
									<van-icon name="chat-o" style="margin-right: 10px;" />
									<van-icon name="like-o" style="margin-right: 10px;" :color="axzt" @click="djax" />
									<div>21</div>
								</div>
								<div
									style="flex: 1;box-sizing: border-box;padding-right: 10px;display: flex;justify-content: flex-end;">
									<van-icon name="share-o" size="20px" />
								</div>
								<!-- <div style="flex: 1;font-size: 12px;color: #b0b0b0;">
									{{qbsj[0].nq}}
								</div> -->
			
							</div>
							<div style="margin: 10px 0;font-size: 14px;color: #a6a6a6;">1评论</div>
							
							<div class="plqys" v-for="(item,index) in plsj" :key="index">
							  <div class="left-box">
								  <img :src="item.user.avatar" alt="">
							  </div>
							  <div class="right-box">
								  <div style="font-weight: 600;font-size: 14px;">{{item.user.nickname}}</div>
								  <div style="color: #787878;">{{item.content}}</div>
							  </div>
							</div>
							
						</div>
			
					</div>
					<van-action-sheet :show="fxym" :actions="actions" @close="onSelect"/>
				</van-overlay>
			
				<!-- 底部 -->
				<van-tabbar :active="active" @change="onChange">
					<van-tabbar-item icon="home-o">首页</van-tabbar-item>
					<van-tabbar-item icon="smile-comment-o">探索</van-tabbar-item>
					<van-tabbar-item icon="contact">我</van-tabbar-item>
				</van-tabbar>
			</div>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				djaxlm: false,
				axzt: '',
				qbsj: [],
				sc: [],
				xh: [],
				history: [],
				isMove: false,
				isMove2: false,
				zzc: false,
				fxym: false,
				actions: [{
						name: '取消',
					},
					{
						name: '投诉',
					},
					{
						name: '分享给朋友',
						subname: '描述信息',
						openType: 'share',
					},
				],
				plsj:[],
				loading: true,
			};
		},
		onLoad() {
			// 模拟获取数据
			setTimeout(() => {
				this.loading = false; // 数据获取成功后，隐藏loading
				// 更新其他数据
			}, 2000);
		},
		methods: {
			onSelect() {
				this.fxym = !this.fxym
			},
			djzzc() {
				this.zzc = !this.zzc
				
				uni.request({
					url: `https://apis.netstart.cn/daodu/lessons/${this.qbsj[0].lesson_id}/comments`,
					method: 'GET',
					success: (res) => {
						this.plsj = res.data
					}
				});
			},
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				let active = event.detail
				if (active == 0) {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				if (active == 2) {
					uni.navigateTo({
						url: '/pages/index3/index3'
					});
				}
			},
			moveToSc() {
				this.isMove = true;
				setTimeout(() => {
					this.isMove = false;
				}, 500); // wait for the animation to finish
				if (this.qbsj.length > 0) {
					const item = this.qbsj.shift();
					this.sc.push(item);
					this.history.push({
						item,
						from: 'qbsj',
						to: 'sc',
						direction: 'left', // add the animation direction
					});
				}
			},
			moveToXh() {
				// 同步获取本地缓存中的myArray
				var myArray = uni.getStorageSync('myArray');
				// 如果myArray不为null或undefined，就把this.qbsj[0]push进去
				if (myArray != null && myArray != undefined) {
				  // 检查myArray的类型，如果不是数组，就转换成数组
				  if (!Array.isArray(myArray)) {
				    myArray = [myArray];
				  }
				  // 检查this.qbsj[0]的值，如果不是空字符串，就push进去
				  if (this.qbsj[0] !== '') {
				    myArray.push(this.qbsj[0]);
				  }
				  // 再次存储myArray
				  myArray = myArray.filter(item => item !== '');
				  uni.setStorage({
				    key: 'myArray',
				    data: myArray
				  });
				}
				// 如果myArray为null或undefined，就直接存储this.qbsj[0]
				else {
				  uni.setStorage({
				    key: 'myArray',
				    data: this.qbsj[0]
				  });
				}
				this.isMove2 = true;
				setTimeout(() => {
					this.isMove2 = false;
				}, 500); // wait for the animation to finish
				if (this.qbsj.length > 0) {
					const item = this.qbsj.shift();
					this.xh.push(item);
					this.history.push({
						item,
						from: 'qbsj',
						to: 'xh',
						direction: 'right', // add the animation direction
					});
				}
			},
			undo() {
				if (this.history.length > 0) {
					const lastAction = this.history.pop();

					// perform the reverse animation based on the saved direction
					if (lastAction.direction === 'left') {
						this.isMove = true;
						setTimeout(() => {
							this.isMove = false;
						}, 500);
						// perform the reverse animation for left direction here
					} else if (lastAction.direction === 'right') {
						// perform the reverse animation for right direction here
						this.isMove2 = true;
						setTimeout(() => {
							this.isMove2 = false;
						}, 500);
					}

					this[lastAction.to].pop();
					this[lastAction.from].unshift(lastAction.item);
				}
			},
			djax() {
				this.djaxlm = !this.djaxlm
				if (this.djaxlm) {
					this.axzt = 'red'
				} else {
					this.axzt = ''
				}
			},
			formatDate(dateStr) {
				// 把日期字符串转换成Date对象
				let year = parseInt(dateStr.toString().slice(0, 4));
				let month = parseInt(dateStr.toString().slice(4, 6)) - 1;
				let day = parseInt(dateStr.toString().slice(6));
				let date = new Date(year, month, day);

				// 获取当前日期的Date对象
				let today = new Date();

				// 比较两个Date对象的年份
				let yearDiff = today.getFullYear() - date.getFullYear();
				let yearStr;
				if (yearDiff === 0) {
					// 如果相同，就返回'今年' + 年份
					yearStr = '今年' + year;
				} else {
					// 如果不同，就计算年份差，并返回'几年前'
					yearStr = yearDiff + '年前';
				}

				// 获取日期对象的月份和日期，并拼接成字符串
				let monthDayStr =
					(date.getMonth() + 1).toString().padStart(2, '0') +
					'/' +
					date.getDate().toString().padStart(2, '0');

				// 返回一个数组
				return [monthDayStr, yearStr];
			}
		},
		mounted() {
			let that = this; // 保存this的值
			async function getData() {
				let res = await uni.request({
					url: `https://apis.netstart.cn/daodu/today_recommends`,
					method: 'GET'
				});
				that.qbsj = res[1].data.comments; // 使用that代替this
				for (let e of that.qbsj) {
					let res = await uni.request({
						url: `https://apis.netstart.cn/daodu/lessons/${e.lesson_id}`,
						method: 'GET'
					});
					e.title = res[1].data.title;
					e.provenance = res[1].data.provenance;
					e.date_by_day = res[1].data.date_by_day
					let jg = that.formatDate(e.date_by_day)
					e.riqi = jg[0]
					e.nq = jg[1]
				}
				console.log(that.qbsj);
				that.$forceUpdate(); // 强制更新视图
			}
			getData();
			console.log();
		}
	}
</script>


<style lang="less">
	body {
		width: 100%;
		height: 100%;
		background-color: #e0e9e1;
	}

	.bm {
		box-sizing: border-box;
		padding: 15px;
		width: 100%;
		height: 80%;

		.lm {
			height: 100%;
			width: 100%;
			background-color: white;
			border-radius: 10px;
			position: relative;
			z-index: 100;
			box-sizing: border-box;
			padding: 10px;
			overflow: auto;

			.lm2 {
				width: 90%;
				height: 100%;
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 10px;
				position: absolute;
				left: 5%;
				top: 10px;
				z-index: -1;

				.lm3 {
					width: 90%;
					height: 100%;
					background-color: rgba(255, 255, 255, 0.4);
					border-radius: 10px;
					position: absolute;
					left: 5%;
					top: 10px;
					z-index: -2;
				}
			}
		}
	}

	.move {
		transform: translateX(-100%);
		transition: all 0.5s ease-in-out;
	}

	.move2 {
		transform: translateX(100%);
		transition: all 0.5s ease-in-out;
	}
	.van-popup--bottom{
		bottom: 50px !important;
	}
	
	 .plqys {
		 margin: 10px 0;
	    display: flex;
	    /* add other styles for the container here */
		.left-box {
		  width: 40px;
		  height: 40px;
		  img{
			  border-radius: 100%;
			  width: 100%;
			  height: 100%;
		  }
		}
		
		.right-box {
		  flex: 1;
		  padding-left: 10px;
		  /* add other styles for the right box here */
		}
	  }
	  
	  
</style>
